<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录管理</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/element.css">
    <style>
        span {

            font-size: 15px;
            color: gray;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div style="width: 500px; margin: 150px auto; background-color:rgba(100,149,237,0.5); border-radius: 10px">
        <div style="width: 100%; height: 100px; font-size: 30px;line-height: 100px; text-align: center; color: darkblue">
            欢迎登录后台管理系统
        </div>
        <div style="margin-top: 25px; width: 100%; height: 320px;">
            <div style="width: 60%; margin: 0 auto">
                <input v-model="phone" type="text"
                       style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%" placeholder="请输入手机号">
                <div style="margin-top: 25px; line-height: 40px">
                    <input type="text" id="code" name="code" v-model="code"
                           style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 70%"
                           placeholder="请输入验证码"  />
                    <span style="font-size: 15px;width: 27%;height: 40px" v-show="sendAuthCode" @click="codeBut">获取验证码</span>
                    <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span>秒</span>
                </div>
                    <button @click="login" style="height: 40px; padding: 10px; width: 100%; margin-top: 25px; background-color: steelblue; color: white">
                        登录
                    </button>
                    <a style="width: 100%; text-align: right; display: inline-block; margin-top: 25px; color: darkblue"
                       href="register.html">还没账号？去注册</a>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/gVerify.js"></script>

<script>
    new Vue({
        el: "#wrapper",
        data: {
            code: '',
            phone: '',
            sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
            auth_time: 0, /*倒计时 计数器*/
        },
        mounted() {

        },
        methods: {
            codeBut() {
                this.sendAuthCode = false;
                this.auth_time = 60;
                var auth_timetimer =  setInterval(()=>{
                    this.auth_time--;
                    if(this.auth_time<=0){
                        this.sendAuthCode = true;
                        // clearInterval(auth_timetimer);
                    }
                }, 1000);

                $.ajax({
                    url: "/msg/code",
                    type: "POST",
                    data: {
                        phone: this.phone
                    }
                }).then(res => {
                    console.log(res)
                    if (res.code == 0) {
                        alert('验证码已发送,请查收');

                    } else {
                        alert('请输入正确手机号');
                    }
                })
            },

            login() {
                console.log(this.code)
                console.log(this.phone)
                $.ajax({
                    url: "/api/phone/login",
                    type: "POST",
                    data: {
                        code:this.code,
                        phone: this.phone
                    }
                }).then(res => {
                    console.log(res)
                    if (res.code==0){
                        location.href= "/page/end/index.html"
                    }
                    if (res.code==5000) {
                        alert("手机号错误")
                    }
                    if (res.code==5001) {
                        alert("验证码错误")
                    }
                    if (res.code==5002) {
                        alert("验证码不能为空")
                    }
                })
            }
        }
    })

</script>
</body>
</html>
